<template>
  <div class="login-container">
    <div class="background-container"></div>
    <div class="background-level-container"></div>

    <div class="login-submit-container">
      <div class="login-left">
        <div class="logoName">欢迎来到 {{ tc('项目名称') }} 后台</div>
      </div>
      <div class="login-right">
        <div class="login-right-content-container">
          <!-- <div class="logo-box">
            <Logo>
              <template #name>
                <div class="login-logo">{{ tc("后台管理") }}</div>
              </template>
            </Logo>
          </div> -->
          <input type="file" @change="dksjk" />
          <div class="formContent">
            <div class="title">{{ tc('项目名称') }}后台登录</div>
            <el-form ref="ruleFormRef" style="max-width: 340px" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm">
              <el-form-item prop="userName">
                <el-input v-model="ruleForm.userName" autocomplete="off" placeholder="请输入账号" />
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" show-password />
              </el-form-item>
              <div class="setUp">
                <div>
                  <el-checkbox v-model="checked">记住我</el-checkbox>
                </div>
                <div class="setUp-forget">忘记密码?</div>
              </div>
              <el-button type="primary" class="submit" @click="submitForm(ruleFormRef)" :disabled="loginType">
                <el-icon class="icons" v-if="loginType"><RefreshRight /></el-icon>
                登录
              </el-button>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import Logo from '@/components/logo/index.vue';
import { Unlock, User, RefreshRight } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
import { useUser } from '@/store/modules/userInfo';
import { useRouter } from 'vue-router';
import { msg } from '@/utils/message';
import { tc } from '@/locales/index';
const router = useRouter();
const userStore = useUser();
const ruleFormRef = ref<any>(null);
const loginType = ref(false);
const checked = ref(false);
const ruleForm = reactive({
  userName: 'admin',
  password: '123456',
});
const rules = reactive<any>({
  password: [{ required: true, message: '请输入账号', trigger: 'change' }],
  userName: [{ required: true, message: '请输入密码', trigger: 'change' }],
});
const submitForm = (formEl: any) => {
  loginType.value = true;
  if (!formEl) return;
  formEl.validate(async (valid: any) => {
    if (valid) {
      await userStore.loginSubmit({
        userName: ruleForm.userName,
        token: 'asdhj1DJKDJKAJUF90IKJDKSDJDKSAdajshkdjasdhj1',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      });
      loginType.value = false;
      msg({
        type: 'success',
        message: `欢迎回来${ruleForm.userName}`,
      });
      router.push('/dashBoard');
    } else {
      console.log('error submit!');
      return false;
    }
  });
};
const dksjk = (e) => {
  const formData = new FormData();
  formData.append('file', e.target.files[0]);
  axios.post('http://8.140.25.59:3003/api/uplodeFileImages', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyUm9sZSI6eyJpZCI6MTEsInVzZXJfbmFtZSI6IjZ5VUIiLCJ1c2VyX3N0YXR1cyI6MSwidXNlcl9yb2xlX2lkcyI6IjIiLCJ1dWlkIjoiZWExYmI2ZTctNjgxMC00YTQ4LTljNTctNGVkZjk4NTk2YmE0IiwidXNlcl9wYXNzd29yZCI6IiQyYSQxMCRqelh4ZkY2d0hxR1laMHRnOFpHZloubVBFRHdBZThWZlI1NFF4WE9lclJGYU56dnVBNW5zRyIsInVzZXJfYWNjb3VudCI6IjI4MzMyNTcyNTVAcXEuY29tIiwidHlwZSI6MX0sImlhdCI6MTcyMzE2NjczNCwiZXhwIjoxNzIzMjAyNzM0fQ.m4dJJR4z-o8MwMSdirhfcKSIC0zrGf97o-0lp48IU2g', // 替换为实际的 token
    },
  });
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background-color: var(--el-color-primary);
  position: relative;
  .background-container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('@/assets/images/login/img_diwen.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
  .background-level-container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('@/assets/images/login/bgimg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-size: auto 100vh;
    z-index: 2;
  }

  .login-submit-container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    .login-left {
      width: 40%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      border-radius: 0px 0px 0px 0px;

      .logoName {
        position: absolute;
        top: 50px;
        left: 50px;
        font-size: 25px;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .login-right {
      width: 60%;
      height: 100vh;
      .login-right-content-container {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .logo-box {
          position: absolute;
          right: 10px;
          top: 10px;
        }
        .formContent {
          width: 369px;
          padding: 20px;
          border-radius: 10px;
          margin: 0 auto;
          background-color: #fff;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
          .title {
            min-width: 60px;
            color: #333;
            font-weight: 600;
            font-size: 30px;
            height: 50px;
            line-height: 50px;
            padding-bottom: 10px;
          }
          ::v-deep(.el-form) {
            max-width: 100% !important;
          }
          ::v-deep(.el-input) {
            width: 100%px !important;
          }
          ::v-deep(.el-input__wrapper) {
            width: 100% !important;
            height: 44px !important;
          }
          ::v-deep(.el-form-item) {
            margin-bottom: 15px;
          }
          ::v-deep(.el-input-group__prepend) {
            background-color: #fff !important;
          }
          .submit {
            width: 369px;
            height: 44px;
            margin: 0 auto;
            margin-top: 10px;
            font-size: 18px;
            color: #fff;
            font-weight: 600;
          }
          .icons {
            margin-right: 10px;
            font-size: 20px;
            animation: rotate 1s linear infinite;
          }
        }
        .setUp {
          width: 369px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .setUp-forget {
            font-size: 14px;
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 750px) {
  .login-left {
    display: none !important;
  }

  .login-right {
    width: 100% !important;
  }
  .formContent {
    width: 90% !important;
    margin: 0 auto !important;
    box-shadow: none !important;
  }
  .setUp,
  .submit {
    width: 100% !important;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
